<!-- 出现的问题 -->
    <!-- 1 过渡切换图片抖动 -->
            <!--  -->
    <!-- 2 小圆点切换图片点击频繁没有过渡效果 -->
            <!-- 函数节流 1、定义锁  2、监听动画结束事件，开锁  3，在改变索引值前判断是否开锁 4，在渲染前关闭锁-->
    <!-- 3 索引取绝对值重复 0 1 -->
    <!-- 4 备份this -->
    <!-- content-type: 请求头请求体 请求中的意思 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .banner {
            width: 500px;
            height: 300px;
            position: relative;
        }
        .bgimg {
            background-repeat: no-repeat;
            background-size: 500px 300px;
            height: 300px;
            width: 500px;
            transition: all 1s;
        }
        
        .btn span {
            position: absolute;
            top: 50%;            
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, .5);
            border: 1px solid #666;
            font-size: 40px;
            text-align: center;
            line-height: 50px;
            color: #fff;
            cursor: pointer;
        }
        .btn span:hover {
            background-color: #000;
        }
        span.pres {
            left: 10px;
        }
        span.nexts {
            right: 10px;
        }
        .circles {
            width: 100px;
            display: flex;
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            height: 12px;
            justify-content: space-between;
            align-items: center;
        }
        .circles li {
            width: 10px;
            height: 10px;
            border: 1px #666 solid;
            border-radius: 50%;
            background-color: #fff;
        }
        .circles .pink{
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="banner">
            <div id="pic" class="bgimg"></div>
            <div class="btn">
                <span id="pre" class="pres">&lt;</span>
                <span id="next" class="nexts">&gt;</span>
            </div>
            <ul id="circle" class="circles">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script>
        var pic = document.getElementById('pic');
        var pre = document.getElementById('pre');
        var next = document.getElementById('next');
        var circle = document.getElementById('circle');
        var cirs = Array.from(circle.children);

        var picArr = ['01.jpg', '02.jpg', '03.jpg'];
 

        function Play(pic, pre, next, circle, cirs, picArr, time) {
            this.pic = pic;
            this.pre = pre;
            this.next = next;
            this.circle = circle;
            this.cirs = cirs;
            this.picArr = picArr;
            this.index = 0;
            this.timer = null;
            this.time = time;
            //定义锁
            this.lock = true;
            this.init();
        }
        Play.prototype.init = function() {
            // 备份this
            var me = this;
            // 默认背景图片
            this.render();
            // 自动轮播方法
            this.slefMotion();
            // 鼠标移入事件
            this.pre.onmouseenter = function() {
                // 清除定时器
                clearInterval(me.timer);
            }
            this.pre.onmouseleave = function() {                
                
                me.mouseleave();
            }
            // 左按钮事件
            this.pre.onclick = function() {
                me.left();
            }
            // 右按钮事件
            this.next.onclick = function() {
                me.right();
            }
             // 鼠标移入事件
             this.next.onmouseenter = function() {
                // 清除定时器
                clearInterval(me.timer);
            }
            this.next.onmouseleave = function() {
                me.mouseleave();
            }
            // 小圆点事件
            this.cirs.forEach((item, index) => {
                // 鼠标移入
                item.onmouseenter = function() {
                    clearInterval(me.timer);
                }
                // 点击事件
                item.onclick = function() {
                    me.cirsClick(index);
                }
                // 鼠标移出
                item.onmouseleave = function() {
                    me.mouseleave();
                }

            })
            // 监听动画完成
            this.pic.addEventListener('transitionend', function() {
                // 关闭定时器
                if(me.lock) {
                    me.lock = false;
                }
            })
        }
        // 鼠标移入事件
        Play.prototype.mouseleave = function() {
            
            // 备份this
            var me = this;
             // 清除定时器
             clearInterval(this.timer);
                // 开启定时器
                this.timer = setInterval(function(){
                    // 改变index
                    me.index++;
                    me.index = me.index % me.picArr.length;
                    me.render();
                }, this.time)
        }
        // 默认渲染方法
        Play.prototype.render = function() {
            this.pic.style.backgroundImage =  'url(./img/' + this.picArr[this.index] + ')';
            
            this.cirs.forEach(item => item.classList.remove('pink'))
            this.cirs[this.index].classList.add('pink');
        }
        // 自动播放方法
        Play.prototype.slefMotion = function() {
            // 备份this
            var me = this;
            // 开启定时器
            this.timer = setInterval(function(){
                // 改变index
                me.index++;
                me.index = me.index % me.picArr.length;
                // 动画开始了
                this.lock = true;
                me.render();
            }, this.time)
        }
        // 左按钮点击事件
        Play.prototype.left = function() {
            if(this.lock) {return;}
            // 清除定时器
            clearInterval(this.timer);
            // 修改索引值
            this.index--;
            this.index = ((this.index % this.picArr.length) + this.picArr.length ) % this.picArr.length;
            // 动画开始了
            this.lock = true;
            // 渲染
            this.render();
        }
        // 由按钮点击事件
        Play.prototype.right = function() {
            if(this.lock) {return;}
           
            // 清除定时器
            clearInterval(this.timer);
            // 修改索引值
            this.index++;
            this.index = this.index  % this.picArr.length;
            // 动画开始了
            this.lock = true;
            // 渲染
            this.render();
            
        }
        // 小圆点事件
        Play.prototype.cirsClick = function(index) {    
            if(this.lock) {return;}       

            this.index = index;
            // 动画开始了
            this.lock = true;
            // 渲染
            this.render();
        }
        
        // 实例化
        new Play(pic, pre, next, circle, cirs, picArr, 2000);
    </script>
</body>
</html>